import { ShElement } from './ShElement'


export class ShToolBtn extends ShElement {

    constructor() {
        super()

        this.$shadow.innerHTML = `
            <style>
                :host {
                    flex-shrink: 0;
                    height: 2em;
                    padding: 0 0.5em;
                    user-select: none;
                    display: flex;
                    align-items: center;
                }
                :host([seperator]) {
                    margin: 0 0.5em;
                    width: 1px;
                    padding: 0;
                    border-left: var(--border-ctrl);
                }
                :host(:not(.sh-disabled):hover) {
                    background-color: var(--color-btn-hover);
                }
                :host(:not(.sh-disabled):active) {
                    background-color: var(--color-btn-active);
                }
                ::slotted(svg) {
                    margin-right: 0.25em;
                }
            </style>
            <slot></slot>
        `
    }
}
customElements.define('sh-tool-btn', ShToolBtn)


export class ShToolbar extends ShElement {
    constructor() {
        super()

        this.$shadow.innerHTML = `
            <style>
                :host {
                    background-color: var(--color-ctrl);
                    border-bottom: var(--border-ctrl);
                    padding: 0.25em;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                }
            </style>
            <slot></slot>
        `
    }
}
customElements.define('sh-toolbar', ShToolbar)